import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';

const modalRoot = document.getElementById('dialog-root');

class WorldCsjPopBarChart extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('WorldCsjBarChart');
    this.state = {
      chartOption: undefined,
      chartHeight: 270,
    };
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    this.setChartData();
  }

  setChartData() {
    const dataSource = [
      [3650, '英国城市群'],
      [4600, '欧洲大都市圈'],
      [5000, '五大湖城市群'],
      [6500, '大西洋城市群'],
      [7000, '日本大都市圈'],
      [15600, '长三角城市群']
    ];
    var spirit = 'image://'
    const option = {

      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}',
      },
      legend: {
        show: false,
      },
      grid: {
        top: '5%',
        left: '3%',
        right: '15%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: { show: false, name: '' },
      yAxis: {
        axisTick: { show: false }, axisLine: { show: false }, splitLine: { show: false }, type: 'category', axisLabel: {
          formatter: function (params) {
            var newParamsName = "";
            var paramsNameNumber = params.length;
            var provideNumber = 6;
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = "";
                var start = p * provideNumber;
                var end = start + provideNumber;
                if (p == rowNumber - 1) {
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr;
              }

            } else {
              newParamsName = params;
            }
            return newParamsName
          },
          // color: function (value, index) {
          //   return value == '长三角城市群' ? '#00feff' : '#fff';
          // },
          color:'#fff',
          fontSize: 11
        },
        data: ['英国城市群', '欧洲大都市圈', '五大湖城市群', '大西洋城市群', '日本大都市圈', '长三角城市群']
      },
      series: [{
        type: 'pictorialBar',
        symbolRepeat: true,
        label: {
          normal: {
            show: true,
            position: 'right',
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 1,
                color: '#00feff',
              },
              {
                offset: 0.5,
                color: '#027eff',
              },
              {
                offset: 0,
                color: '#0286ff',
              },
            ]),
            textStyle: {
              color: '#fff',
              fontSize: 12,
            },
          },
        },
        symbolSize: ['80%', '80%'],
        barCategoryGap: '30%',
        data: [{
          value: 3650,
          symbol: spirit
        }, {
          value: 4600,
          symbol: spirit
        }, {
          value: 5000,
          symbol: spirit
        }, {
          value: 6500,
          symbol: spirit
        }, {
          value: 7000,
          symbol: spirit
        }, {
          value: 15600,
          symbol: spirit
        }]
      }]
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `城市群人口（单位：万人）`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 3px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}

export default WorldCsjPopBarChart;
